<template>
  <div class="seats">
    <div v-for="(type, typeIndex) in seats" :key="typeIndex" class="type">
      <div v-for="(row, rowIndex) of type" :key="rowIndex" class="col">
        <div class="row">
          <div v-for="(col, colIndex) of row" :key="colIndex">
            <div class="position">
              <div class="seat-top">
                <img
                  :class="style1"
                  v-if="col[0] === 0"
                  src="@img/chair_empty.svg"
                  alt=""
                  @click="
                    isStudent
                      ? select({
                          type: typeIndex,
                          row: rowIndex,
                          col: colIndex,
                          idx: 0,
                        })
                      : void 0
                  "
                />
                <img
                  v-else-if="col[0] === 1"
                  src="@img/chair_picked.svg"
                  alt=""
                  @click="isStudent ? msg : void 0"
                  class="seat-top"
                />
              </div>
              <div class="table">
                <img src="@img/table.svg" alt="" />
              </div>
              <div class="seat-bottom">
                <img
                  :class="style1"
                  v-if="col[1] === 0"
                  class="active"
                  src="@img/chair_empty.svg"
                  alt=""
                  @click="
                    isStudent
                      ? select({
                          type: typeIndex,
                          row: rowIndex,
                          col: colIndex,
                          idx: 1,
                        })
                      : void 0
                  "
                />
                <img
                  v-else-if="col[1] === 1"
                  @click="isStudent ? msg : void 0"
                  src="@img/chair_picked.svg"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
        <div class="label">{{ typeIndex + "-" + rowIndex }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    seats: {
      type: Object,
      default() {
        return {};
      },
    },
    appointment: {
      type: Boolean,
      default() {
        return false;
      },
    },
    open: {
      type: Number,
      default() {
        return 0;
      },
    },
  },
  components: {},
  data() {
    return {
      types: [2, 4, 6, 8],
    };
  },
  computed: {
    ...mapGetters(["isStudent", "isManager"]),
    style1() {
      if (this.open) {
        return this.isStudent ? "hovered" : "";
      } else {
        return "";
      }
    },
  },
  methods: {
    select(seat) {
      this.$emit("select", seat);
    },
    msg() {
      this.$message.info("该位置已被预约");
    },
  },
  created() {
    console.log(this.seats, "seats");
  },
};
</script>
<style scoped>
.seats {
  display: grid;
  max-height: 400px;
  overflow: auto;
  max-width: 660px;
}
.type {
  width: 560px;
  display: grid;
  align-content: center;
  grid-template-columns: repeat(6, 1fr);
  box-sizing: border-box;
  border: 1px dashed salmon;
  overflow: auto;
}

.col {
  margin: 10px;
  display: flex;
  flex-direction: column;
}

.table {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.position {
  position: relative;
}

.row {
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
}

.hovered:hover {
  box-shadow: 0 0 10px 2px #00d40b inset;
}

.right::before {
  border-radius: 1px solid black;
}

.table {
  /* margin: -18px 0 -14px; */
  transform: rotate(180deg);
  width: 46px;
}

.table > img {
  /* height: 70px; */
}

.seat-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

.seat-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
}

.seat-top > img {
  transform: rotate(-90deg);
  /* width: 36px; */
  /* height: 36px; */
}
.seat-bottom > img {
  transform: rotate(90deg);
  /* width: 36px; */
  /* height: 36px; */
}

.label {
  font-size: 0.9rem;
  color: green;
  text-align: center;
  /* width: 40px; */
  /* display: flex;
  justify-content: center;
  align-items: center; */
}
</style>
